﻿<%@ Page Language="C#" AutoEventWireup="true" Inherits="dev_arabizer" Codebehind="arabizer.aspx.cs" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<style id="sStyle" type="text/css" media="print"></style>
	<style type="text/css">
		.pretext {
			width: 500px;
			height: 400px;
			overflow: scroll;
			border:4px solid #eeeeee;
			padding: 10px;
		}
		.btn {
			padding: 5px 10px;
			position: relative;
			display: inline-block;
			border-radius: 3px;
			margin-right: 5px;
			cursor: pointer;
			color: #fff;
			text-shadow: 0 -1px 0 #5082c2;
			.gradient(#88b6f4,#6e9ede);
			background-color: #6e9ede;
			background-repeat: repeat-x;
			background-image: -ms-linear-gradient(top, #88b6f4, #6e9ede); 
			background-image: linear-gradient(top, #88b6f4, #6e9ede);
			border: solid 1px #70a0e0;
		}
	</style>
	<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript">
		$(function () {
			$("#bSubmit").click(function () {
				// remove pretext
				$(".pretext").remove();
				// read txcstext, go thru it, any paddings
				var sStyle = $("#sStyle");
				sStyle.text($("#txCssText").val());
				var s = sStyle.get(0).sheet;
				//for (i in s) console.log(i +" : "+ s[i]);
				// for cssRules get selectorText, go throu style[], if name or value have "left" or "right" play there
				var totalStr = '';
				var allArr = [];

				for (var i = 0; i < s.cssRules.length; i++) {

					if (s.cssRules[i].type != 1) continue;

					var rule = s.cssRules[i],
						selectorText = rule.selectorText,
						newStyle = { "selectorText": selectorText, "style": [] };
					// if cssText has ar- means there is a fall back default, strip ar, create new defaults then proceed, IE only
					// unfortunately it must be parsed, as cssRules style collection does not render them

					for (var j = 0; j < rule.style.length; j++) {

						var style = rule.style[j];

						// if margin or padding, margin-left: 12px => margin-right: 12px; margin-left: 0;

						if (style.indexOf("left") > -1) {
							// check right, if exists, swap, else zero
							var rStyle = style.replace("left", "right"),
								value = rule.style.getPropertyValue(style),
								rvalue = rule.style.getPropertyValue(rStyle);

							if (value == rvalue) continue;

							newStyle.style.push({ "name": rStyle, "value": value });

							if (!rvalue) {
								rvalue = "0";
								// switch case of width, style and color
								if (style.indexOf("color") > -1 || style.indexOf("style") > -1) {
									rvalue = "none"
								} else if (style === "left") {
									rvalue = "auto";
								}

							}
							newStyle.style.push({ "name": style, "value": rvalue });
						}
						// if right exists, check left, if defined, move on
						if (style.indexOf("right") > -1) {

							var lStyle = style.replace("right", "left"),
								value = rule.style.getPropertyValue(style),
								lvalue = "0";
							if (rule.style.getPropertyValue(lStyle) == null || rule.style.getPropertyValue(lStyle) === "") {
								newStyle.style.push({ "name": lStyle, "value": value });
								// switch case of width, style and color
								if (style.indexOf("color") > -1 || style.indexOf("style") > -1) {
									lvalue = "none";
								} else if (style === "right") {
									lvalue = "auto";
								}
								newStyle.style.push({ "name": style, "value": lvalue });
							}
						}
						if (style === "float") {
							newStyle.style.push({ "name": style, "value": (rule.style.getPropertyValue(style) === "left") ? "right" : "left" });
						}

					}
					// parse csstext for more
					var allcss = rule.style.cssText.split(";");

					for (var j = 0; j < allcss.length; j++) {
						cssname = $.trim(allcss[j]);

						if (cssname.substring(0, 3) === "ar-") {

							// overright rule as is
							var vs = cssname.split(":");
							newStyle.style.push({ "name": vs[0].substring(3), "value": vs[1] });

						}
					}

					if (newStyle.style.length > 0) allArr.push(newStyle);

				}

				// now recreate
				var str = "";

				for (var i = 0; i < allArr.length; i++) {
					str += "\n";
					var item = allArr[i];
					str += item.selectorText + "{ \n";
					for (var j = 0; j < item.style.length; j++) {
						str += item.style[j].name + ":" + item.style[j].value + ";\n";
					}
					str += " } \n";

				}
				$("<pre />").addClass("pretext").html(str).appendTo(document.body);

			});
		});
	</script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
	Styles:<br />
    <textarea id="txCssText" class="wm hm" style="width: 400px; height: 400px;">
		.alldefined {
			padding: 5px;
			margin: 5px;
		}
		.allunique {
			padding: 10px 4px 10px 5px;
			margin: 4px 5px;
			margin-left: 20px;
		}
		.leftmargin {
			margin-left: 5px;
		}
		.rightpadding {
			padding-right: 10px;
		}
		.auto {
			margin: 5px auto;
			margin-left: 10px;
		}
		.border {
			border: 1px solid red;
			border-left-style: dashed;
		}
		.border2 {
			border-right: 1px solid green;
			border-left-width: 4px;
		}
		.upperborder {
			border:1px solid green;
		}
		.innerborder {
			ar-border-left-width: 1px;
			border-left-width: 0;
		}
		.float {
			float: right;
		}
		.position {
			right: 20px;
		}

	</textarea>
	<br />

	Outcome:<br />
	
	<br />
	<span id="bSubmit" class="btn">Arabize</span>
    </form>
</body>
</html>
